<template>
	<view>
		<view class="content-main" :style="{ height: heightContainer}">
			<text class="parent-desc">
				{{subject.subjectParentDesc}}
			</text>
		</view>
		<view class="edging">
			<view @click="toggle" :class="['arrow',foldSubject?'arrow-down':'']"></view>
			<view class="slip"></view>
			<view class="h"></view>
		</view>
		<single-choice-question v-if="subject.choiceType=='1'||subject.choiceType=='2'" :subject="subject" @change="change"></single-choice-question>
		<multi-choice-question v-if="subject.choiceType=='3'" :subject="subject" @change="change"></multi-choice-question>
	</view>
</template>

<script>
	import SingleChoiceQuestion from "./SingleChoiceQuestion";
	import MultiChoiceQuestion from "./MultiChoiceQuestion";
	export default {
		components: {
			SingleChoiceQuestion,
			MultiChoiceQuestion,
		},
		props:{
			subject:{
				type:Object,
				default(){
					return {}
				}
			}
		},
		data() {
			return {
				foldSubject: false,
				domHeihgt: '',
				heightContainer: '',
			}
		},
		methods: {
			change(value){
				this.$emit('change',value);
			},
			toggle() {
				this.foldSubject = !this.foldSubject;
				if (this.foldSubject) {
					this.dynaHeight();
				} else {
					this.heightContainer = this.domHeihgt + 'px'
				}
			},
			dynaHeight() { //计算隐藏和显示后的标签高度
				this.getHeight();
				let height = this.foldSubject ? this.domHeihgt / 3 : this.domHeihgt;
				this.heightContainer = height + 'px'
			},
			getHeight() { //实时获取元素高度  苹果手机好像支持不了，没有效果
				let dom = uni.createSelectorQuery().selectAll(`.${'content-main'}`);
				dom.boundingClientRect(rect => {}).exec(e => {
					if (e[0][0]) {
						this.domHeihgt = e[0][0].height;
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		font-size: 30upx;
		padding: 30upx 30upx;
		&-main{
			display: flex;
			/*height:400upx;*/
			/*flex-wrap: wrap;*/
			margin-bottom: 20upx;
			overflow:hidden;
		}
		&-sub {
			color: #000;
			font-weight: bold;
			overflow-y: auto;
		}
		&-swapper{
			margin-bottom:90upx;
		}
	}
	.question-stem {
		border-radius: 8rpx;
		box-shadow: 0 0 10upx #eaeaea;
		padding: 30upx 30upx;
		font-size: 30upx;
		margin-bottom: 40upx;
	}

	.parent-desc {
		color: #000;
		font-weight: bold;
		overflow-y: auto;
	}

	.edging {
		position: relative;
	}

	.arrow {
		width: 56upx;
		height: 56upx;
		z-index: 10;
		background-image: url('~@/static/img/mine/arrow.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: absolute;
		bottom: -32upx;
		right: 40upx;

		&.arrow-down {
			z-index: 10;
			background-image: url('~@/static/img/mine/arrow-down.png');
			background-repeat: no-repeat;
		}
	}
</style>
